<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./作业1样式.css">
</head>
<body>
    <div class="box">
        <div class="son">
            <h1>发微博</h1>
            <span><font style="color: orange;"></font></span><br>
            <textarea placeholder="共可以输入100个字"  class="text"></textarea><br>
            <p><button onclick="add()">发布</button><span class="a1">当前还可输入<font></font>字</span></p>
        </div>
        <ul>
            
        </ul>
    </div>
</body>
</html>
<script>
    var font=document.querySelector('font')
    var text=document.querySelector('.text')
    var ul=document.querySelector('ul')
    function getTime(){
        var date=new Date()
        var year=date.getFullYear();
        var mouth=date.getMonth()+1;
        var day=date.getDate();
        var h=date.getHours();
        var m=date.getMinutes();
        var s=date.getSeconds();
        return `${year}-0${mouth}-${day} ${h}:${m}:${s}`;
    }
    function getPhone(){
        var a= localStorage.getItem('number')
        if(a!=null){
            return JSON.parse(a)
        }else{
            return[]
        }
    }
    font.innerHTML=getPhone();
    function set(arr){
        localStorage.setItem('data',JSON.stringify(arr))
    }
    function get(){
        var a= localStorage.getItem('data')
        if(a!=null){
            return JSON.parse(a)
        }else{
            return []
        }
    }
    function add(){
        //先获取数据
        var shuju=get()
        //操作数据
        shuju.push({
            text:text.value,
            time:getTime()
        })
        //本地存储
        set(shuju)
        //渲染
        xr()
        text.value=''
    }
    function xr(){
        ul.innerHTML=''
        //先获取数据
        var shuju=get()
        for(i=0;i<shuju.length;i++){
            //创建
            var li=document.createElement('li')
            //赋值
            li.innerHTML=`
            <li><p>${shuju[i].text}</p><span>${shuju[i].time}</span><button onclick="del(${i})">删除</button></li><br>
            `;
            //添加
            ul.appendChild(li)
        }
    }
    xr()
    function del(index){
        //先获取数据
        var shuju=get();
        //操作数据 删除
        shuju.splice(index,1)
        //存储
        set(shuju)
        //渲染
        xr()
    }
</script>